﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>纯js响应式模态窗口和弹出层插件MODALit</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<!--[if lte IE 9]>
	    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
	    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js">flexibility(document.documentElement);</script>
	<![endif]-->
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="dist/MODALit.min.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯js响应式模态窗口和弹出层插件MODALit <span>A simple, lightweight and Responsive JavaScript modal/popup dialog library</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<section id="demo">
        <div class="container features align center">
            <h2>DEMO</h2>
            <div class="demo">
                <h3>Transition</h3>
                <ul>
                    <li><button type="button" class="btn demo-transition" data-content="Zoom" data-transition="zoom">Zoom</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Flip" data-transition="flip">Flip</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Left" data-transition="slideLeft">Slide Left</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Right" data-transition="slideRight">Slide Right</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Up" data-transition="slideUp">Slide Up</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Down" data-transition="slideDown">Slide Down</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Position</h3>
                <ul>
                    <li><button type="button" class="btn demo-position" data-content="Default" data-transition="zoom">Default</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Left" data-position="left" data-transition="slideRight">Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Right" data-position="right" data-transition="slideLeft">Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top" data-position="top" data-transition="slideDown">Top</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom" data-position="bottom" data-transition="slideUp">Bottom</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Right" data-position="right top" data-transition="slideDown">Top Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Left" data-position="left top" data-transition="slideDown">Top Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Right" data-position="right bottom" data-transition="slideUp">Bottom Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Left" data-position="left bottom" data-transition="slideUp">Bottom Left</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Sizes</h3>
                <ul>
                    <li><button type="button" class="btn demo-size" data-width="small" data-content="Small dialog">Small</button></li>
                    <li><button type="button" class="btn demo-size" data-width="large" data-content="Large dialog">Large</button></li>
                    <li><button type="button" class="btn demo-size" data-width="full" data-footer="" data-transition="slideDown" data-content="Fullscreen dialog">Full</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Media</h3>
                <ul>
                    <li><button type="button" class="btn demo-media" data-src="https://source.unsplash.com/k8OCHhEymME" data-caption="<a href='https://unsplash.com/@nativemello?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> ian dooley</a>">Image</button></li>
                    <li><button type="button" class="btn demo-media" data-src="https://www.youtube.com/watch?v=rmf54oNI6ts">Youtube</button></li>
                    <li><button type="button" class="btn demo-media" data-title="Bacon Ipsum" data-src="//baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=html">Ajax</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Gallery</h3>
                  
                   <ul>
                    <li><img data-src="https://source.unsplash.com/5i8l46zW8do" src="https://source.unsplash.com/5i8l46zW8do/200x200" data-caption="<a href='https://unsplash.com/@brunels_world?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Brunel Johnson</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/2o_2syCZS5M" src="https://source.unsplash.com/2o_2syCZS5M/200x200" data-caption="<a href='https://unsplash.com/@matheusferrero?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Matheus Ferrero</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/ilPwXo3qhEo" src="https://source.unsplash.com/ilPwXo3qhEo/200x200" data-caption="<a href='https://unsplash.com/@ilyayakover?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Ilya Yakover</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/tcgMBsW4zlU" src="https://source.unsplash.com/tcgMBsW4zlU/200x200" data-caption="<a href='https://unsplash.com/@karishea?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Kari Shea</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/dI9KhXi0ooE" src="https://source.unsplash.com/dI9KhXi0ooE/200x200" data-caption="<a href='https://unsplash.com/@osmanrana?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Osman Rana</a>" class="demo-gallery"></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Confirm</h3>
                <p><button type="button" class="btn demo-confirm">Confirm</button></p>
            </div>
            <div class="demo">
                <h3>Nested</h3>
                <p><button type="button" id="btn-nested1" class="btn">Nested</button></p>
            </div>
            <div class="demo">
                <h3>Body Scrolling</h3>
                <ul>
                    <li><button id="prevent" type="button" class="btn">Prevent</button></li>
                    <li><button id="scrollable" type="button" class="btn">Scrollable</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Backdrop</h3>
                <p><button id="overlay" type="button" class="btn">Disable</button></p>
            </div>

        </div>
    </section>

    <section id="customize">
        <div class="container features align center">

            <h2>Customize</h2>
            <div class="demo">
                <h3>CSS</h3>
                <p><button id="btnCss" type="button" class="btn">Custom Style</button></p>
            </div>
            
            <div class="demo">
                <h3>Form</h3>
                <p><button id="btnLogin" type="button" data-target="#login" class="btn">Login</button><br><small>( ID:admin / PASS:1234 )</small></p>
            </div>
            <div class="demo">
                <h3>Navigation</h3>
                <p><button id="btnNav" type="button" class="btn">Sidebar</button></p>
            </div>
            <div class="demo">
                <h3>Scroll</h3>
                <div id="scroll">
                    <p>Scroll down the page, the popup would be appear at the right side corner.</p>
                    <p class="icon arrow"></p>
                </div>
                
            </div>
    
        </div>
    </section>

  
    <footer id="footer">
        <div class="container align center">
            <p><small><a href="https://knot-design.jp/en/">© 2017 Copyright Knot Design</a></small></p>
        </div>
    </footer>

    <div id="login" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Login</h3>
            </header>
            <form class="content" name="login">
                <p>
                    <label>
                        <input type="text" name="id" class="validate" required>
                        <span class="label">ID</span>
                    </label>
                    <label>
                        <input type="password" name="pswd" class="validate" required>
                        <span class="label">PASS</span>
                    </label>
                </p>
            </form>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn light">Cancel</button>
                    <button type="button" data-modal-btn="action" class="btn primary">Login</button>
                </p>
            </footer>
        </div>
    </div>


    <div id="scroller" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Scrolling Popup</h3>
            </header>
            <div class="content">

                <p>In the future, do not show this popup.</p>
            </div>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn primary">Yep!</button>
                </p>
            </footer>
        </div>
    </div>

    <div id="nested" class="modalit" aria-hidden="true">
        <div class="dialog">
            <div class="content">
                <p><button id="btn-nested2" type="button" class="btn primary">Try to click!</button></p>
            </div>
            <span data-modal-btn="dismiss"></span>
        </div>
    </div>

	</div>
	
	<script src="dist/MODALit.min.js"></script>
    	<script src="js/script.js"></script>
</body>
</html>